<div style="font-weight: bold; font-size: 20px; margin-top: 20px"> ${serialNumber}、各市签到数据分析 </div>
<div style="text-indent: 2em; font-size: 20px; margin-top: 20px; line-height: 35px;"> 对于一个地区来说，人流量高的作用之一就是让这个地区的消费水平提高，能够达到带动这一地区经济发展的效果。由下图可看出不同年份各市签到数据与GDP、人口及兴趣点数量之间的变化关系 </div>
<div style="width: 1000px;margin: 16px auto;overflow: hidden;">
    <div style="float: left;font-size: 18px;font-weight: bold;">签到数据与GDP的变化关系</div>
    <select id="pl-weibo-area-id" style="float: right;padding: 5px;min-width: 100px;"></select>
    <select id="pl-weibo-area-create-time" style="float: right;padding: 5px;min-width: 100px;margin-right: 5px;"></select>
</div>
<div id="pl-weibo-area-id-chart1" style="width: 1000px; height: 500px; margin: 0 auto; margin-top: 20px"></div>
<div style="width: 1000px;margin: 16px auto;overflow: hidden;">
    <div style="float: left;font-size: 18px;font-weight: bold;">签到数据与人口的变化关系</div>
    <select id="pl-weibo-area-id3" style="float: right;padding: 5px;min-width: 100px;"></select>
    <select id="pl-weibo-area-create-time3" style="float: right;padding: 5px;min-width: 100px;margin-right: 5px;"></select>
</div>
<div id="pl-weibo-area-id-chart3" style="width: 1000px; height: 500px; margin: 0 auto; margin-top: 20px"></div>
<div style="width: 1000px;margin: 16px auto;overflow: hidden;">
    <div style="float: left;font-size: 18px;font-weight: bold;">签到数据与兴趣点数量变化关系</div>
    <select id="pl-weibo-area-create-time2" style="float: right;padding: 5px;min-width: 100px;"></select>
</div>
<div id="pl-weibo-area-id-chart2" style="width: 1000px; height: 500px; margin: 0 auto; margin-top: 20px"></div>
<script>
    (function () {
        // 1 --- 签到与GDP变化关系
        var weiboSignedYearList = ${weiboSignedYearList}
        // 增加年份选项
        var resultKey2 = [];
        var resultData2 = [];
        $.each(weiboSignedYearList,function(key, item) {
            resultKey2.push(key);
            var option="<option value="+item+">"+item+"</option>";
            $("#pl-weibo-area-create-time").append(option)
        });

        $("#pl-weibo-area-id").change(function () {
            change()
        })
        var wbSignedMap = ${wbSignedMap}
        console.log($("#pl-weibo-area-create-time").val())
        var weiboSignedUserDtoList = wbSignedMap[$("#pl-weibo-area-create-time").val()]
        /*var weiboSignedUserDtoList = [
            {"areaName": "海口", "gdp": [{"count": "479.67", "date": "2022-06-20"}, {"count": "134.67", "date": "2022-06-21"}], "populationCount" : [{"count": "3434343", "date": "2022-06-20"}, {"count": "4956765", "date": "2022-06-21"}]}
        ]*/
        var result = {}
        $.each(weiboSignedUserDtoList, (index, value) => {
            result[value.areaName] = [
                {
                    type: "签到人数",
                    datas: value.populationCount
                },
                {
                    type: "GDP",
                    datas: value.gdp
                }
            ]
        })
        // 2 --- 签到数据与人口的变化关系
        var weiboSignedYearList3 = ${weiboSignedYearList}
        // 增加年份选项
        var resultKey4 = [];
        var resultData4 = [];
        $.each(weiboSignedYearList3,function(key, item) {
            resultKey4.push(key);
            var option="<option value="+item+">"+item+"</option>";
            $("#pl-weibo-area-create-time3").append(option)
        });

        $("#pl-weibo-area-id3").change(function () {
            change3()
        })
        var wbSignedMap3 = ${wbSignedMap2}
        var weiboSignedUserDtoList3 = wbSignedMap3[$("#pl-weibo-area-create-time3").val()]
        var result3 = {}
        $.each(weiboSignedUserDtoList3, (index, value) => {
            result3[value.areaName] = [
                {
                    type: "签到人数",
                    datas: value.populationCount
                },
                {
                    type: "常住人口",
                    datas: value.gdp
                }
            ]
        })
        console.log(result)
        $(document).ready(function () {
            // 各市签到数据分析
            var resultKey = [];
            var resultData = [];
            $.each(result,function(key, item) {
                resultKey.push(key);
                var option="<option value="+key+">"+key+"</option>";
                $("#pl-weibo-area-id").append(option)
            });
            // 取第一个的值
            resultData = resultKey.length>0? result[resultKey[0]]: [];
            console.log("resultData", resultData)
            initEcharts(resultData)
            // 各市签到数据分析2
            var resultKey3 = [];
            var resultData3 = [];
            $.each(result3,function(key, item) {
                resultKey3.push(key);
                var option="<option value="+key+">"+key+"</option>";
                $("#pl-weibo-area-id3").append(option)
            });
            // 取第一个的值
            resultData3 = resultKey3.length>0? result3[resultKey3[0]]: [];
            console.log("resultData3", resultData3)
            initEcharts3(resultData3)
        })
        function getOption(xCategory, series, title, legend, color) {
            return {
                title: {
                    text: title,
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "line",
                    },
                    formatter (params) {
                        let popContent = '<p><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:'+params[0].color+';"></span>' + ("签到人数:" + (params[0].data/10000).toFixed(2) + "万") +'</p>'
                        let gdpContent = '<p><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:'+params[1].color+';"></span>' + ("GDP: " + params[1].data + "亿") +'</p>'
                        return popContent + gdpContent
                    }
                },
                color: color? color: ['#4b91ff'],
                legend: {
                    show: legend?true: false,
                    data: legend,
                    icon: 'circle',
                    right: '4%'
                },
                grid: {
                    left: "8%",
                    right: "4%",
                    bottom: "5%",
                    containLabel: false,
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: xCategory,
                },
                yAxis: [{
                    type: 'value',
                    name:'签到人数',
                },
                {
                    type: 'value',
                    name:'GDP',
                }],
                series: series
            }
        }
        function getOption3(xCategory, series, title, legend, color) {
            return {
                title: {
                    text: title,
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "line",
                    },
                    formatter (params) {
                        let popContent = '<p><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:'+params[0].color+';"></span>' + ("签到人数:" + (params[0].data/10000).toFixed(2) + "万") +'</p>'
                        let gdpContent = '<p><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:'+params[1].color+';"></span>' + ("常住人口: " + (params[1].data/10000).toFixed(2) + "万") +'</p>'
                        return popContent + gdpContent
                    }
                },
                color: color? color: ['#4b91ff'],
                legend: {
                    show: legend?true: false,
                    data: legend,
                    icon: 'circle',
                    right: '4%'
                },
                grid: {
                    left: "8%",
                    right: "4%",
                    bottom: "5%",
                    containLabel: false,
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: xCategory,
                },
                yAxis: [{
                    type: 'value',
                    name:'签到人数',
                },
                    {
                        type: 'value',
                        name:'常住人口',
                    }],
                series: series
            }
        }
        function getSCategory(result, type) {
            var series = [], xCategory = [], data = [];
            $.each(result,function(index,item) {
                var obj = { name: '', type: 'line', data: [], yAxisIndex: index};
                var count = $.map(item.datas, function(n, i){ return n.count; });
                if(index===0) {
                    xCategory = $.map(item.datas, function(n, i){ return n.date; })
                }
                obj.name = item.type;
                obj.data = count;
                series.push(obj);
            });
            return {
                series,
                xCategory
            }
        }
        // 签到数据与GDP的变化关系图形加载
        function initEcharts(datas) {
            var myecharts = echarts.init(document.getElementById("pl-weibo-area-id-chart1"));
            var series = getSCategory(datas).series;
            var xCategory = getSCategory(datas).xCategory;
            var legend = ['签到人数', 'GDP'];
            var optionLine = getOption(xCategory, series, null, legend, ['#4b91ff', '#f2637b', '#fad337']);
            myecharts.setOption(optionLine);
        }
        function initEcharts3(datas) {
            var myecharts = echarts.init(document.getElementById("pl-weibo-area-id-chart3"));
            var series = getSCategory(datas).series;
            var xCategory = getSCategory(datas).xCategory;
            var legend = ['签到人数', '常住人口'];
            var optionLine = getOption3(xCategory, series, null, legend, ['#4b91ff', '#f2637b', '#fad337']);
            myecharts.setOption(optionLine);
        }
        function change() {
            var areaId = document.getElementById('pl-weibo-area-id');
            var d1 = areaId.options[areaId.selectedIndex].value;
            var d2 = areaId.value;
            initEcharts(result[d2])
        }
        function change3() {
            var areaId = document.getElementById('pl-weibo-area-id3');
            var d1 = areaId.options[areaId.selectedIndex].value;
            var d2 = areaId.value;
            initEcharts3(result3[d2])
        }

        var weiboSignedYearList = ${weiboSignedYearList}
        var resultKey3 = [];
        var resultData3 = [];
        // 增加年份选项
        $.each(weiboSignedYearList,function(key, item) {
            resultKey3.push(key);
            var option="<option value="+key+">"+item+"</option>";
            $("#pl-weibo-area-create-time2").append(option)
        });

        /*var areaData = [
            { county: "海口", count: 6 },
            { county: "白沙", count: 565 },
            { county: "陵水", count: 44 },
            { county: "三亚", count: 221 },
            { county: "琼海", count: 41 },
            { county: "文昌", count: 400 },
            { county: "万宁", count: 144 },
            { county: "东方", count: 94 },
            { county: "儋州", count: 664 },
        ];*/
        var areaData = ${wbSignedAreaRankList};
        var hainanMapBar = echarts.init(document.getElementById("pl-weibo-area-id-chart2"));
        var barYAxisData = $.map(areaData, function(n, i){ return n.county  })
        var barValues = $.map(areaData, function(n, i){ return n.count })
        var optionBar = {
            title: {
                text: "",
            },
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    type: "shadow",
                },
            },
            color: ['#4b91ff'],
            legend: false,
            grid: {
                left: "3%",
                right: "4%",
                bottom: "3%",
                containLabel: true,
            },
            xAxis: {
                type: "value",
                boundaryGap: [0, 0.01],
            },
            yAxis: {
                type: "category",
                data: barYAxisData,
            },
            series: [
                {
                    type: "bar",
                    data: barValues,
                    label: {
                        normal: {
                            show: true,
                            position: 'right',
                            formatter: (params) => {
                                console.log(params.value)
                                let result = ''
                                result = params.value / 10000
                                if (params.value > 10000) {
                                    return result + '万'
                                } else {
                                    return params.value
                                }
                            },
                            textStyle: {
                                color: '#4a4b4b',
                            },
                        },
                    },
                }
            ]
        }
        hainanMapBar.setOption(optionBar);
    })()
</script>